<template>
  <div class="search">
    <!-- 搜索框 -->
    <div class="search_box">
      <van-search shape="round" background="#fbfcfd" placeholder="搜索歌曲、歌曲、专辑" 
      v-model="value" 
      @search="Search"
      @input="proposal" />
    </div>
    <div v-if="searchContent == 0">
      <div v-show="isShow">
        <!-- 热门搜索 -->
        <div class="hotWord">
          <div class="title">热门搜索</div>
          <div class="list">
            <div 
            class="item" v-for="(item, index) in SearchList" 
            :key="index" @click="clickSearch(item.first)"
            >
              {{ item.first }}
            </div>
          </div>
        </div>
        <!-- 搜索历史 -->
        <div class="history_box" v-if="!historyList.length == 0">
          <div class="h_title">
            <span>搜索历史</span>
            <span @click="clear()">一键清空</span>
          </div>
          <!-- 历史记录-->
          <div class="history_list">
            <div 
            class="history_item" 
            v-for="(item, index) in  historyList" 
            :key="index"
            @click="clickSearch(item.kw)"
            >
              <!-- img -->
              <div class="img_box">
                <img src="../assets/histoty.png" alt="">
              </div>
              <div class="history_song_name" @click="clickSearch(item.kw)">
                {{ item.kw }}</div>
              <div class="history_del" @click="remove(index)">
                <img src="../assets/history_del.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索建议 -->
      <div class="suggestions_box" v-if="!searchkw.length == 0">
        <div class="suggestions_title">搜索"{{ value }}"</div>
        <!-- 建议词 -->
        <div 
        class="suggestions_item" 
        v-for="(item, index) in searchkw" 
        :key="index"
        @click="clickSearch(item.keyword)"
        >
        <i class="fdj"></i>
        {{ item.keyword }}
          </div>

         
        </div>
      </div>
      <!-- 搜索结果 -->
      <div class="search_content" v-if="!searchContent.length == 0">
        <!-- 最佳匹配 -->
        <div class="search_title">最佳匹配</div>
        <!-- 歌手信息 -->
        <div class="songs_info">
          <div class="songs_img">
            <img src="../assets/xuq.jpg" alt="">
          </div>
          <div class="songs_dec">
            歌手： 
            <span>{{searchContent[0].ar[0].name}}</span>
            <span>({{searchContent[0].ar[0].alias[0]}})</span>
          </div>
          <div class="right">
            <img src="../assets/icon_gt.png" alt="">
          </div>
        </div>

        <!-- 歌曲 -->
        <div 
        class="newset_box" 
        v-for="(item, index) in searchContent" 
        :key="index"
        >
        <div class="newset_item">
          <!-- 左侧歌曲名&歌手 -->
          <div>
            <div class="song_name">{{ item.name }}</div>
            <div class="songs_auth">{{ item.ar[0].name }} -- {{ item.name }}</div>
          </div>
          <!-- 右侧播放按钮 -->
          <div @click="clickPlay(item)">
            <div v-show="item.isPlay" class="icon"></div>
            <img v-show="!item.isPlay" src="../assets/autoplay.gif" alt="">
          </div>
        </div>
      </div>
      </div>
      <audio ref="audio"></audio>
  </div>
</template>
<script>
export default {
  name: 'Search',
  // 页面初始数据
  data() {
    return {
      // 热门搜索的数据
      SearchList: [],
      // 搜索历史记录
      historyList: [],
      value: '',
      // 是否显示历史记录和热搜词
      isShow: true,
      // 搜索建议
      searchkw: [],
      // 搜索结果
      searchContent: [],
      songid:""
    }
  },
  // 页面逻辑(方法)
  methods: {
    getSearch() {
      // 通过axios 向后台接口拿数据
      this.axios({
        method: 'GET',
        url: "/search/hot",
      }).then((result) => {
        //  console.log(result);
        // console.log(result.data);
        // console.log(result.data.result.hots);
        this.SearchList = result.data.result.hots;
        // console.log(this.SearchList);
      })
    },
    // 搜素记录
    Search() {
      // 获取输入框内容
      var obj = {
        kw: this.value
      }

      // 调用搜索结果
      this.kwsearch(this.value)

      // 读取本地历史记录
      var keyword = JSON.parse(localStorage.getItem('kw'))
      // console.log(keyword);

      // 判断localStorage是否有历史数据
      if (keyword) {
        // 如果输入的历史数据存在，则不需要再次添加数据
        for (let i = 0; i < keyword.length; i++) {
          if (keyword[i].kw == this.value) {
            return;
          }
        }
        // 如果有历史记录则在原来的基础上新增一条数据
        // keyword.push(obj);  // 尾部添加
        keyword.unshift(obj);
        // 赋值到页面
        this.historyList = keyword
        localStorage.setItem('kw', JSON.stringify(keyword))
      } else {
        // console.log(obj);
        // 设置本地存储
        localStorage.setItem('kw', JSON.stringify([obj]))  // 将数据转换为字符串
        // 赋值到页面
        this.historyList = [obj]
        // console.log(this.historyList);
      }

    },
    // 搜索建议
    proposal() {
      // console.log(this.value);
      // 判断输入框是否为空，如果输入框的值不为空时显示搜索建议，反之输入框为空则显示热门搜索和搜索历史
      if (this.value.length != 0) {
        this.isShow = false
      } else {
        this.isShow = true
        // 置空搜索内容
        this.searchContent = []
      }
      // 向服务器发送请求
      this.axios({
        method: "GET",
        url: "/search/suggest",
        params: {
          // type : 如果传 'mobile' 则返回移动端数据
          type: "mobile",
          // keywords: 关键词（必选参数）
          keywords: this.value
        }
      })
        .then((result) => {
          // console.log(result);
          // 赋值给搜索建议
          this.searchkw = result.data.result.allMatch
        })
        .catch((err) => {
          this.searchkw = []
        })
    },
    // 搜索结果
    kwsearch(value){
       // 向服务器发送请求
       this.axios({
        method: "GET",
        url: "/cloudsearch",
        params: {
          keywords: value,
        }
      })
        .then((result) => {
          console.log(result);
          // console.log(result.data);
          result.data.result.songs.map((item) => {
          item.isPlay = true;
          return item;
        })
          // 赋值给搜索建议
          this.searchContent = result.data.result.songs;
          console.log(this.searchContent);
        })
    },
    // 点击热搜词进行搜索
    clickSearch(value){
      // console.log(value);
      this.value = value
      // 调用搜索方法
      this.kwsearch(this.value)
    },
    // 删除单个历史记录
    remove(e){
      console.log(e);
      // 删除所点击的历史记录 物理删除（只是删除html元素·）
      this.historyList.splice(e,1)
      // 更新本地存储（删除本地存储数据的实现）
      localStorage.setItem('kw',JSON.stringify(this.historyList))
      console.log(this.historyList);
    },
    // 一键删除所有的记录
    clear(){
      // 将页面的historyList数据置空
      this.historyList = [];
      // 清空 localStorage
      localStorage.clear('kw')
    },
     // 播放歌曲
     clickPlay(e) {
      // console.log(e);
      // 将所有的播放状态统一设置为暂停
      this.searchContent.map((item) => {
        item.isPlay = true;
        return item;
      })
      e.isPlay = !e.isPlay;
      console.log(e);

      // 获取页面上的audio标签
      var audio = this.$refs.audio

      // 判断是否点击相同的id
      if (this.songid == e.id) {
        // 控制音乐的状态
        if (audio.paused) {
          // 如果音乐是暂停的就继续播放
          audio.play()
          return;
        }
        // console.log("当前音乐正在播放");
        // 调用暂停的方法
        audio.pause();
        // 修改状态
        e.isPlay = !e.isPlay;
        return;
      }
      //  将播放id赋值回去
      this.songid = e.id
       //  将音乐地址赋值回去给audio
      audio.src = `https://music.163.com/song/media/outer/url?id=${this.songid}.mp3`
      // 播放
      audio.play();
    }
  },
  // 生命周期
  created() {
    this.getSearch();
    // 读取本地历史记录
    var keyword = JSON.parse(localStorage.getItem('kw'))
    if (keyword) {
      this.historyList = keyword
    }
  }

}
</script>
<style lang="less" scoped>
.search {
  .search_box {
    margin: 10px 0 0 0;
  }

  .hotWord {
    .title {
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      font-size: 14px;
      color: #666;
    }

    .list {
      padding-left: 5px;

      .item {
        height: 32px;
        line-height: 32px;
        display: inline-block;
        padding: 0px 14px;
        border-radius: 32px;
        border: 1px solid rgba(0, 0, 0, .1);
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
  }

  .history_box {
    padding: 0 8px 0 5px;

    .h_title {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: #666;
      margin-bottom: 10px;
    }

    .history_list {
      .history_item {
        div {
          height: 45px;
        }

        display: flex;
        align-items: center;

        .img_box {
          width: 15px;
          height: 15px;
          margin: 0 10px;

          img {
            width: 100%;
            display: block;
          }
        }

        .history_song_name {
          flex: 9;
          padding: 0 15px 0 0;
          color: #333;
          font-size: 14px;
          border-bottom: 1px solid #eeeff0;
          line-height: 45px;
        }

        .history_del {
          width: 35px;
          height: 35px;
          padding: 5px;
          border-bottom: 1px solid #eeeff0;

          img {
            width: 100%;
            display: block;
          }
        }
      }
    }
  }

  // 搜索建议
  .suggestions_box {
    margin-top: 5px;

    div {
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      padding-left: 8px;
    }

    .suggestions_title {
      border: 1px solid #eeeff0;
      color: #507daf;

    }

    .suggestions_item {
      border-bottom: 1px solid #eeeff0;
      .fdj{
        width: 15px;
        height: 15px;
        background-image: url('../assets/search.png');
        display: inline-block;
        vertical-align: middle;
        background-position: 0 0;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
  .search_content{
    .search_title{
      font-size: 14px;
      color: #6a666a;
      margin: 5px 0 5px 0;
      padding-left: 5px;
    }
    .songs_info{
      display: flex;
      align-items: center;
      height: 55px;
      border: 1px solid #eeeff0;
      .songs_img{
        width: 45px;
        height: 45px;
        padding-left: 8px;
        img{
          width: 100%;
          display: block;
        }
      }
      .songs_dec{
        width: calc(~"100%" - 103px);
        padding: 0 15px 0 8px;
        font-size: 16px;
        >span:nth-child(1){
          color: #507dc0;
        }
      }
      .right{
        width: 45px;
        text-align: center;
        img{
          width: 15px;
          height: 15px;
        }
      }
    }
    .newset_box {
    padding: 0 5px;
    padding-bottom: 10px;

    .newset_item {
      display: flex;
      height: 56px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8e8;

      >div:nth-child(1) {
        width: 90%;

        >div {
          // 多行文本溢出隐藏
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; // 省略号
        }

        .song_name {
          font-size: 16px;
          color: #333;
        }

        .songs_auth {
          color: #888;
          font-size: 12px;
          margin-top: 4px;
        }
      }

      >div:nth-child(2) {
        .icon {
          width: 32px;
          height: 32px;
          background-image: url('../assets/index_icon_2x.png');
          background-repeat: no-repeat;
          background-position: -18px 0;
          background-size: 166px 97px;
        }

        img{
          width: 22px;
          height: 22px;
          display: block;
        }
      }
    }
    }
  }
}
</style>